{% extends 'generic/object_create.html' %}
{% load form_helpers %}
{% load helpers %}
{% load static %}

{% block form %}
    <div class="card">
        <div class="card-header"><strong>Device</strong></div>
        <div class="card-body">
            {% render_field form.name %}
            {% render_field form.role %}
            {% render_field form.status %}
            {% render_field form.secrets_group %}
        </div>
    </div>
    <div class="card">
        <div class="card-header"><strong>Location</strong></div>
        <div class="card-body">
            {% render_field form.location %}
            {% render_field form.rack_group %}
            {% render_field form.rack %}
            {% if obj.device_type.is_child_device and obj.parent_bay %}
                <div class="mb-10 d-flex justify-content-center">
                    <label class="col-lg-3 col-form-label">Parent device</label>
                    <div class="col-lg-9">
                        <p class="form-control-plaintext">
                            {{ obj.parent_bay.device|hyperlinked_object }}
                        </p>
                    </div>
                </div>
                <div class="mb-10 d-flex justify-content-center">
                    <label class="col-lg-3 col-form-label">Parent bay</label>
                    <div class="col-lg-9">
                        <p class="form-control-plaintext">
                            {{ obj.parent_bay.name }}
                            {% if perms.dcim.change_devicebay %}
                                <a href="{% url 'dcim:devicebay_depopulate' pk=obj.parent_bay.pk %}" class="btn btn-danger btn-sm">
                                    <span class="mdi mdi-close-thick" aria-hidden="true" title="Remove device"></span> Remove
                                </a>
                            {% endif %}
                        </p>
                    </div>
                </div>
            {% else %}
                {% render_field form.face %}
                {% render_field form.position %}
            {% endif %}
        </div>
    </div>
    <div class="card">
        <div class="card-header"><strong>Hardware</strong></div>
        <div class="card-body">
            {% render_field form.manufacturer %}
            {% render_field form.device_type %}
            {% render_field form.serial %}
            {% render_field form.asset_tag %}
        </div>
    </div>
    <div class="card">
        <div class="card-header"><strong>Software</strong></div>
        <div class="card-body">
            {% render_field form.platform %}
            {% render_field form.software_version %}
            <div class="mb-10 d-flex justify-content-center"
                 id="software_version_image_container"
                 style="display:none !important">{# !important is required to override d-flex #}
                <div class="col-lg-3"></div>
                <div class="col-lg-9">
                    <span class="form-text">
                        <span id="software_version_image_description"><img src="{% static 'img/ajax-loader.gif' %}"></span>
                        <ul id="software_version_image_list">
                            <li> Software images for the selected software version will appear here </li>
                        </ul>
                    </span>
                </div>
            </div>
            {% render_field form.software_image_files %}
        </div>
    </div>
    <div class="card">
        <div class="card-header"><strong>VRF Assignment</strong></div>
        <div class="card-body">
            {% render_field form.vrfs %}
        </div>
    </div>
    <div class="card">
        <div class="card-header"><strong>Management</strong></div>
        <div class="card-body">
            {% if editing %}
                {% render_field form.primary_ip4 %}
                {% render_field form.primary_ip6 %}
            {% endif %}
        </div>
    </div>
    <div class="card">
        <div class="card-header"><strong>Topology</strong></div>
        <div class="card-body">
            {% render_field form.device_redundancy_group %}
            {% render_field form.device_redundancy_group_priority %}
            {% render_field form.controller_managed_device_group %}
        </div>
    </div>
    <div class="card">
        <div class="card-header"><strong>Virtualization</strong></div>
        <div class="card-body">
            {% render_field form.cluster_group %}
            {% render_field form.clusters %}
        </div>
    </div>
    {% include 'inc/tenancy_form_panel.html' %}
    {% include 'inc/extras_features_edit_form_fields.html' %}
    <div class="card">
        <div class="card-header"><strong>Local Config Context Data</strong></div>
        <div class="card-body">
            {% render_field form.local_config_context_schema %}
            {% render_field form.local_config_context_data %}
        </div>
    </div>
    <div class="card">
        <div class="card-header"><strong>Comments</strong></div>
        <div class="card-body">
            {% render_field form.comments %}
        </div>
    </div>
{% endblock %}

{% block javascript %}
    <script type="text/javascript">

        const software_version_image_container = document.querySelector('div#software_version_image_container');
        const software_version_image_description = document.querySelector('span#software_version_image_description');
        const software_version_image_list = document.querySelector('ul#software_version_image_list');
        const software_image_url = '{% url 'dcim-api:softwareimagefile-list' %}';

        function retrieve_software_images(software_version_id, device_type_id) {
            $.when(
                $.ajax({url: software_image_url, method: "GET", data: {'software_version': software_version_id, 'device_types': device_type_id}}),
                $.ajax({url: software_image_url, method: "GET", data: {'software_version': software_version_id, 'default_image': 'true'}})
            ).then(
                (device_type_images, default_image) => {
                    if (default_image[0].count == 0 && device_type_images[0].count == 0) {
                        software_version_image_description.innerHTML = `
                            No software images found for device type <b class="text-nowrap">${$('select#id_device_type').find(':selected')[0].text}</b>
                        `;

                    } else if (device_type_images[0].count == 0) {
                        software_version_image_description.innerHTML = `
                Software version <b class="text-nowrap">${$('select#id_software_version').find(':selected')[0].text}</b> provides no software images
                for device type <b class="text-nowrap">${$('select#id_device_type').find(':selected')[0].text}</b>. The default image is:
            `;

                        let li = document.createElement('li');
                        let a = document.createElement('a');
                        let linkText = document.createTextNode(default_image[0].results[0].image_file_name);
                        a.title = default_image[0].results[0].image_file_name;
                        a.href = default_image[0].results[0].url.replace('api/', '');
                        li.appendChild(a);
                        a.appendChild(linkText);
                        software_version_image_list.appendChild(li);

                    } else {
                        software_version_image_description.innerHTML = `
                Software version <b class="text-nowrap">${$('select#id_software_version').find(':selected')[0].text}</b> provides the following software images
                for device type <b class="text-nowrap">${$('select#id_device_type').find(':selected')[0].text}</b>:
            `;

                        for (result of device_type_images[0].results) {
                            let li = document.createElement('li');
                            let a = document.createElement('a');
                            let linkText = document.createTextNode(result.image_file_name);
                            a.title = result.image_file_name;
                            a.href = result.url.replace('api/', '');
                            li.appendChild(a);
                            a.appendChild(linkText);
                            software_version_image_list.appendChild(li);
                        }
                    }
                },
                err => {
                    software_version_image_description.innerHTML = '<b>Error retrieving software image list</b>';
                }
            );
        }

        function clear_software_image_list() {
            software_version_image_list.innerHTML = '';
        }

        function hide_software_image_container(){
            software_version_image_container.style.setProperty('display', 'none', 'important');
            software_version_image_description.innerHTML = '';
            clear_software_image_list();
        }

        function populate_software_image_list(software_version_id) {
            clear_software_image_list();
            software_version_image_description.innerHTML = '<img src="{% static 'img/ajax-loader.gif' %}">';
            software_version_image_list.style.visibility = 'hidden'; // prevent flicker when changing values
            software_version_image_container.style.setProperty('display', 'flex', 'important');
            let device_type_id = $('select#id_device_type').find(':selected')[0].value;
            if (!device_type_id) {
                software_version_image_description.innerHTML = '<b>Unable to display software image list. Select a device type first.</b>';
            } else {
                retrieve_software_images(software_version_id, device_type_id);
                software_version_image_list.style.visibility = 'visible';
            }
        }

// on select
// jQuery required for triggering on select2 jQuery events
        $('select#id_software_version').on('select2:select', function (e) {
            populate_software_image_list(e.params.data.id);
        });

// on unselect
// jQuery required for triggering on select2 jQuery events
        $('select#id_software_version').on('select2:unselect', hide_software_image_container);

// initialize on document load
        document.addEventListener("DOMContentLoaded", function() {
            $('select#id_software_version').select2();
            var selected_version = $('select#id_software_version').select2('data')[0].id;
            if (selected_version) {
                populate_software_image_list(selected_version);
            }
        });

    </script>
{% endblock %}
